<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;height: 56px;">
			<el-form :inline="true" :model="filters">
				<el-form-item label="申请人">
					<el-input class="input-new-tag" placeholder="请输入申请人姓名" v-model="filters.applicant" style="width: 160px;"></el-input>
				</el-form-item>
				<el-form-item label="申请类型">
					<el-select placeholder="请选择申请类型" v-model="filters.category" style="width: 140px;">
						<el-option v-for="item in categorys" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="用餐地点">
					<el-select placeholder="请选择用餐地点" v-model="filters.room" style="width: 160px;">
						<el-option v-for="item in rooms" :key="item" :label="item" :value="item">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="用餐类型">
					<el-select placeholder="请选择用餐类型" v-model="filters.mealType" style="width: 140px;">
						<el-option v-for="item in diningTypes" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
			  		<el-checkbox v-model="filters.includeMerge">只展示合并用餐</el-checkbox>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="fnGetMyMngmts">查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>
		
		<!--我的审核列表-->
		<el-table :data="myMngmt" border v-loading="myMngmtLoading" class="my-mngmt-list">
			<el-table-column type="index" width="60">
			</el-table-column>
			<el-table-column prop="Category" label="申请类型" width="100">
			</el-table-column>
			<!--<el-table-column label="申请人" min-width="200">-->
				<!--<template scope="scope">-->
					<!--<p>{{scope.row.Applicant}} - {{scope.row.Mobile}}</p>-->
				<!--</template>-->
			<!--</el-table-column>-->
			<el-table-column prop="Applicant" label="申请人" width="140">
			</el-table-column>
			<el-table-column prop="Dept" label="申请部门" width="140">
			</el-table-column>
			<el-table-column prop="VisitorDept" label="来访单位" width="200">
			</el-table-column>
			<!--<el-table-column prop="VisitorNames" label="来访人员" width="230" :formatter="fnVisitorFormat">-->
			<!--</el-table-column>-->
			<!--<el-table-column prop="VisitorLevel" label="级别" width="90">-->
			<!--</el-table-column>-->
			<el-table-column label="用餐时间" min-width="150">
				<template scope="scope">
					<p>{{scope.row.VisitDate | moment}} {{scope.row.MealType}}</p>
				</template>
			</el-table-column>
			<el-table-column prop="MealNum" label="用餐人数" width="100" :formatter="fnMealNumFormat">
			</el-table-column>
			<el-table-column prop="Room" label="用餐地点" width="100">
			</el-table-column>
			<el-table-column prop="Price" label="用餐标准" width="100" :formatter="fnPriceFormat">
			</el-table-column>
			<el-table-column label="是否合并用餐" min-width="130">
				<template scope="scope">
					<p v-if="scope.row.MergeIDs">是</p>
					<p v-else>否</p>
				</template>
			</el-table-column>
			<el-table-column prop="Status" label="状态" width="90">
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="140">
				<template scope="scope">
					<el-button size="small" @click="fnSignoff(scope.row.ID)">详情</el-button>
					<el-button type="primary" size="small" @click="fnOpenModifyMeal(scope.row.ID)">修改</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-pagination layout="total, prev, pager, next" @current-change="fnPaginationChange" :page-size="size" :total="total" style="float:right;">
			</el-pagination>
		</el-col>
		
		<!--修改界面-->
		<el-dialog title="修改用餐信息" v-model="mealFormVisible" :close-on-click-modal="false" show-close="false">
			<el-form :inline="true" :model="mealForm" label-width="80px" :rules="mealFormRules" ref="mealForm">
				<el-form-item label="用餐标准">
					<el-select v-model="mealForm.Prices" placeholder="请选择">
						<el-option v-for="item in prices" :key="item" :label="item + '元'" :value="item">
						</el-option>
					</el-select>
				</el-form-item>
				
				<el-form-item label="用餐地点">
					<el-select v-model="mealForm.Room" placeholder="请选择" @change="fnWatchRoom">
						<el-option v-for="item in rooms" :key="item" :label="item" :value="item">
						</el-option>
					</el-select>
			    	<i :class="checkTxt"></i>
				</el-form-item>
				
				<el-form-item label="用餐时段">
					<el-time-picker is-range v-model="mealForm.MealTime" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" format="HH:mm" @blur="fnMealTimeBlur">
					</el-time-picker>
					<i :class="checkTxt"></i>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<span class="tip-msg">{{tipMsg}}</span>
				<el-button @click.native="fnCancel">取消</el-button>
				<el-button type="primary" v-if="hasShow" @click.native="fnCheckRoomAndPrice">确认提交</el-button>
				<el-button type="primary" v-else @click.native="fnModifyMeal">合并用餐</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
    import Svc from '../service/index.js'
	export default {
		data() {
			return {
				filters : {
					room : '全部', //餐厅
					applicant : '', //申请人姓名
					mealType : 99,
					category :99,
					includeMerge : false
				},
				//用餐类型
		        diningTypes : [{
		        	label : "全部",
		        	value : 99
		        },{
		        	label : "早餐",
		        	value : 0
		        },{
		        	label : "午餐",
		        	value : 1
		        },{
		        	label : "晚餐",
		        	value : 2
		        }],
		        //申请类型
		        categorys : [{
		        	label : "全部",
		        	value : 99
		        },{
		        	label : "标准",
		        	value : 0
		        },{
		        	label : "补单",
		        	value : 1
		        }],
				employeeID : '',
				applyID : '',
				empID : '',//当前登陆人的工号
				total:0,
				skip:0,
				size:20,
				myMngmtLoading:false,
				myMngmt:[],
				mealForm:{
					Prices : '',
					Room : '',
					MealTime : ''
				},
				mealFormVisible:false, //展示修改页面
				checkTxt : '', //标志->验证用餐地点跟用餐时段是否可用
				rooms:["全部"],//所有餐厅
				prices:[],//所有餐费
				tipMsg : '',
				hasShow : true
			}
		},
		methods: {
			//显示message提示框
            openMessage : function(msg,type){
    	        this.$message({
		          	showClose: true,
		          	message: msg,
		          	type: type
		        });
            },
            //格式化->时间
            fnDateFormat(row, column) {
            	var moment = require('moment');
                var date = row[column.property];  
	          	if (date == "") {  
	             	return "------";  
	          	}  
	          	return moment(date).format("YYYY-MM-DD");  
            },
            //格式化->来访人员
            fnVisitorFormat(row, column){
            	var list = row[column.property] || [];
            	var res = ''
            	for (var i=0;i<list.length;i++) {
            		if (i == list.length-1) {
            			res += list[i]
            			continue
            		}
            		res += list[i] + "、"
            	}
            	return res
            },
            //格式化->餐费
            fnPriceFormat(row, column){
                var val = row[column.property];  
	          	return val + "元"; 
            },
            //格式化->用餐人数
            fnMealNumFormat(row, column){
                var val = row[column.property];  
	          	return val + "人"; 
            },
            //分页
			fnPaginationChange(val) {
				this.skip = val-1;
				this.fnGetMyMngmts();
			},
            //是否只展示合并用餐
            fnHasStandard(){
            	this.filters.includeMerge = !this.filters.includeMerge
            },
			//获取我的审核列表
			fnGetMyMngmts : function() {
				var that = this
				that.myMngmtLoading = true
				//skip代表数据下标，从0开始
				var params = {
					Categroy : parseInt(that.filters.category),
					MealType : parseInt(that.filters.mealType),
					IncludeMerge: that.filters.includeMerge,
					Applicant : that.filters.applicant,
					Room : that.filters.room,
					Skip: that.skip*that.size,
					Size: that.size
				}
				
				if (params.Room == "全部") {
					params.Room = ""
				}
				
				var user = sessionStorage.getItem('user');
				if (user) {
					user = JSON.parse(user);
					params.EmpID = user.EmployeeID || '';
				}
				
	            Svc.fnPostData('/api/meal/myapproved',params,function(res){
	            	if (res.body.ErrCode == 0){
	            		that.myMngmt = res.body.Data.List
	            		that.total = res.body.Data.Total
	            		that.myMngmtLoading = false
	            	} else {
	            		that.openMessage("我的审核列表获取失败！",'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！",'error')
	            })
			},
			//获取所有餐厅及餐费
			fnGetRoomAndPrices(){
				var that = this
	            Svc.fnGetData('/api/dataconfig',{},function(res){
	            	if (res.body.ErrCode == 0){
	            		that.rooms = that.rooms.concat(res.body.Data.Room)
	            		that.prices = res.body.Data.MealPrice
	            	} else {
	            		that.openMessage("当前用餐申请获取失败！",'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！",'error')
	            })
			},
			//获取当前记录的内容
			fnCurrentMeal(){
				var that = this
	            Svc.fnGetData('/api/meal/detail/'+that.applyID,{},function(res){
	            	if (res.body.ErrCode == 0){
	            		var starts = res.body.Data.TimeStart.split(":")
	            		var ends = res.body.Data.TimeEnd.split(":")
	            		that.mealForm.Prices = res.body.Data.Price
	            		that.mealForm.Room = res.body.Data.Room
	            		that.mealForm.MealTime = [new Date(2017,11,21,parseInt(starts[0]),parseInt(starts[1]),0),new Date(2017,11,21,parseInt(ends[0]),parseInt(ends[1]),0)]
	            	} else {
	            		that.openMessage("当前用餐申请获取失败！ ",'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！ ",'error')
	            })
			},
			//显示修改页面
			fnOpenModifyMeal(applyID){
				this.applyID = applyID
				this.mealFormVisible = true
				//获取当前记录的内容
				this.fnCurrentMeal()
			},
			//将时间转换为分钟数
			fnDataToMinute(time){
				var moment = require('moment');
				var list = (moment(time).format('HH:mm')).split(':')
				return parseInt(list[0])*60 + parseInt(list[1])
			},
			//验证用餐地点及用餐时段是否可用
			fnCheckRoomAndPrice(){
				var that = this
				var moment = require('moment');
				var params = {
					Date:moment(that.myMngmt.VisitDate).format('YYYY-MM-DD'),
					Room:that.mealForm.Room,
					Start:that.fnDataToMinute(that.mealForm.MealTime[0]),
					End:that.fnDataToMinute(that.mealForm.MealTime[1])
				}
	            Svc.fnPostData('/api/meal/check',params,function(res){
	            	if (res.body.ErrCode == 0){
	            		that.fnModifyMeal()
	            	} else {
	            		that.tipMsg = res.body.ErrMsg
	            		that.hasShow = false
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！",'error')
	            })
			},
			//用餐时间失去焦点时进行验证
			fnMealTimeBlur(){
				this.tipMsg = ''
        		this.hasShow = true
			},
			//用餐地点发生变化是进行验证
			fnWatchRoom(){
				this.tipMsg = ''
        		this.hasShow = true
			},
			//提交修改
			fnModifyMeal(){
				var that = this
				var params = {
						ApplyID:that.applyID,
						EmpID:that.empID,
						Start:that.fnDataToMinute(that.mealForm.MealTime[0]),
						End:that.fnDataToMinute(that.mealForm.MealTime[1]),
						Price:that.mealForm.Prices,
						Room:that.mealForm.Room
				}
				Svc.fnPostData('/api/meal/modify',params,function(res){
	            	if (res.body.ErrCode == 0){
	            		that.mealFormVisible = false
	            		that.openMessage("用餐信息修改成功！",'success')
	            		that.fnGetMyMngmts()
	            	} else {
	            		that.openMessage(res.body.ErrMsg,'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！",'error')
	            })
			},
			//取消修改
			fnCancel(){
				var that = this
				that.mealFormVisible = false
				that.tipMsg = ''
        		that.hasShow = true
			},
			//查看详情
			fnSignoff(applyID){
				this.$router.push({ path: '/mealmanagement',query:{'applyID':applyID,'taskID':0,'hasList':false,'pageType':'/mymanagement'}});
			}
		},
		mounted() {
			var user = sessionStorage.getItem('user');
			if (user) {
				user = JSON.parse(user);
				this.empID = user.EmployeeID || '';
			}
			//获取我的审核列表
			this.fnGetMyMngmts();
			//获取所有餐厅及餐费
			this.fnGetRoomAndPrices()
		}
	}
</script>

<style scoped>
	.my-mngmt-list{
		width: 100%;
		margin-top: 20px;
	}

	.toolbar {
	    background: #f2f2f2;
	    padding: 10px;
	    margin: 10px 0;
	}
	
	.icon-success{
		color: #67c23a;
	}
	
	.icon-error{
		color: #fa5555;
	}
	
	.tip-msg{
	    font-size: 13px;
	    color: red;
	    margin-right: 25%;
	}
</style>